<template>
    <div>
        <a-card :bordered="false" :bodyStyle="{ padding: 0 }" :loading="loading">
            <!-- 第一行 日期 -->
            <div style="display: flex;">
                <a-card-grid class="columnClassFirst">
                    <div style="white-space: nowrap; font-weight: bold;">
                        {{ getColumns.date[0] }}
                    </div>
                </a-card-grid>
                <a-card-grid v-for="(item, index) in getColumns.date.slice(1)" :key="index" class="columnClassOther">
                    {{ item.split('-')[2] }}
                </a-card-grid>
            </div>
            <!-- 第二行 星期 -->
            <div style="display: flex;">
                <a-card-grid class="columnClassFirst">
                    <div style="white-space: nowrap; font-weight: bold;">
                        当前房态
                    </div>
                </a-card-grid>
                <a-card-grid v-for="(item, index) in getColumns.week.slice(1)" :key="index" class="columnClassOther">
                    {{ item }}
                </a-card-grid>
            </div>
            <!-- 数据行 -->
            <div style="display: flex;" v-for="(trueData, trueIndex) in getTrueData()" :key="trueIndex">
                <a-card-grid class="columnClassFirst" :style="getBackgroundColor(trueData[0].roomState)">
                    {{ trueData[0].value }}
                    <!-- 右上角 -->
                    <div v-if="trueData[0].roomMg"
                        :style="{ ...getCssTopRight('20px', '20px'), ...getBackgroundColor(trueData[0].roomMg) }" />

                </a-card-grid>
                <a-card-grid v-for="(item, index) in trueData.slice(1)" :key="index" class="columnClassOther"
                    :style="getBackgroundColor(item.roomState)">
                    <!-- 右上角 -->
                    <!-- <div :style="{ ...getCssTopRight('20px', '20px'), ...getBackgroundColor(trueData[0].roomMg) }" /> -->
                </a-card-grid>
            </div>
        </a-card>
        <div style="width: 100%; display: flex; justify-content: center;">
            <example />
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import example from '../FT/example'
import { KfStyleSettingMixin } from '@/views/PmsKF/KfStyleSetting/KfStyleSetting'
// import { KfStyleSettingMixin } from '../../KfStyleSetting/KfStyleSetting'

export default {
    name: 'YuDingFenFangTu',
    mixins: [JeecgListMixin, KfStyleSettingMixin],
    data() {
        return {
            dayjs,
            today: dayjs().format('YYYY-MM-DD'),
            range: 23,
            url: {
                list: '/room/roomBookInfo/queryBookByDate'
            },
            columns: [],
            isorter: {
                column: 'roomCode',
                order: 'asc',
            },
            ipagination: {
                current: 1,
                pageSize: 9999,
            },
        }
    },
    components: {
        example,
    },
    computed: {
        getColumns() {
            const date = []
            const week = []
            const data = this.dataSource.length ? this.dataSource[0] : {}
            for (let key in data) {
                if (key.split('-').length === 3) {
                    date.push(key)
                }
            }
            const dateSort = date.sort()
            for (let d of dateSort) {
                const weekDay = dayjs(d).day()
                if (weekDay === 0) {
                    week.push('日')
                } else if (weekDay === 1) {
                    week.push('一')
                } else if (weekDay === 2) {
                    week.push('二')
                } else if (weekDay === 3) {
                    week.push('三')
                } else if (weekDay === 4) {
                    week.push('四')
                } else if (weekDay === 5) {
                    week.push('五')
                } else if (weekDay === 6) {
                    week.push('六')
                } else { }
            }
            return { date: dateSort, week: week }
        },
    },
    methods: {
        getTrueData() {
            let trueData = []
            for (let d = 0; d < this.dataSource.length; d++) {
                trueData[d] = []
                for (let key in this.dataSource[d]) {
                    if (key.split('-').length === 3) {
                        trueData[d].push({
                            value: key,
                            roomState: this.dataSource[d][key],
                        })
                    }
                }
                trueData[d].sort((a, b) => {
                    return dayjs(a.value).isBefore(dayjs(b.value)) ? -1 : 1
                })
                trueData[d] = [{
                    value: this.dataSource[d].room_code,
                    roomState: this.dataSource[d].room_state,
                    roomFlag: this.dataSource[d].room_flag,
                    roomMg: this.dataSource[d].room_mg
                }, ...trueData[d].slice(1)]
            }
            return trueData
        },
    }
}
</script>

<style scoped>
.columnClassFirst {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: auto 0;
    border: 1px solid gray;
    width: 10%;
    height: 50px;
    position: relative;
}

.columnClassOther {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: auto 0;
    border: 1px solid gray;
    width: 5%;
    height: 50px;
    position: relative,
}
</style>